@mixin w {
    margin: 0 auto;
    width: 996px;
}

.content {
    .banner {
        position: relative;
        height: 550px;

        >img {
            width: 100%;
            height: 100%;
        }

        >ul {
            position: absolute;
            bottom: 2%;
            left: 43%;
            list-style: none;

            li {
                margin-right: 20px;
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #a2d2e9;
            }

            li:first-child {
                background-color: #2395cb;
            }
        }
    }
}

@mixin in-block {
    display: inline-block;
}

@mixin tri($color) {
    position: absolute;
    left: 136px;
    bottom: 0;
    top: 168px;
    content: '';
    width: 0;
    height: 0;

    border: {
        left: 20px solid transparent;
        right: 20px solid transparent;
        top: 21px solid $color;
        bottom: 21px solid transparent;
    }
}

.content {
    .icon {
        @include w;

        padding: {
            top: 65px;
        }

        >div {
            @include in-block;
        }

        .n-center {
            >div {
                @include in-block;
            }

            .n-icon {
                position: relative;
                width: 315px;
                height: 168px;
                background-color: #2395cb;

                &::before {
                    @include tri(#2395cb);
                }
            }
        }
    }
}